<template>
  <div class="hero" :class="is_dark ? 'bg-dark' : 'bg-gray'">
    <div class="hero-body">
      <h2>思政云刷题</h2>
      <p>全新版本，支持搜题刷题。注意：考试模式不需要选择章节。</p>
      <div class="form-group">
        <label class="form-label" for="course-select">选择课程</label>
        <select class="form-select" id="course-select" @change="select_course" v-model="course">
          <option value="sixiu">思修</option>
          <option value="jindaishi">近代史</option>
          <option value="mayuan">马原</option>
          <option value="maogai">毛概</option>
        </select>
      </div>
      <div class="form-group">
        <label class="form-label" for="line-select">选择章节</label>
        <select class="form-select" id="line-select" v-model="line">
          <option v-for="line in lines" :value="line" :key="line">
            {{ meta_data['map'][line] }}
          </option>
        </select>
      </div>
    </div>
    <div class="form-group select-group">
      <div class="btn-group btn-group-block">
        <button class="btn btn-primary" @click="recite_page">背题</button>
        <button class="btn btn-primary" @click="practice_page">答题</button>
        <button class="btn btn-error" @click="exam_page">考试</button>
        <button class="btn btn-success" @click="is_opened = true">更多</button>
      </div>
    </div>
    <div class="form-group">
      <label class="form-switch">
        <input type="checkbox" :checked="is_dark" @click="change_dark">
        <i class="form-icon"></i>
        夜间模式
      </label>
      <a href="https://gitee.com/sun-zhenxing/vue-better-exam">开源地址</a>，请详细阅读授权协议，题库可能不是最新，请根据当前考试策略复习。
    </div>
  </div>
  <div class="modal" :class="{ active: is_opened, 'bg-dark': is_dark }">
    <a @click="is_opened = false" class="modal-overlay" aria-label="Close"></a>
    <div class="modal-container">
      <div class="modal-header">
        <a @click="is_opened = false" class="btn btn-clear float-right" aria-label="Close"></a>
        <div class="modal-title h5">更多</div>
      </div>
      <div class="modal-body">
        <div class="content">
          功能试用：
          <div class="btn-group btn-group-block">
            <button class="btn btn-sm btn-primary" @click="search_page">快速搜题</button>
            <button class="btn btn-sm btn-primary tooltip tooltip-top" data-tooltip="即将推出">导出错题</button>
            <button class="btn btn-sm btn-primary tooltip tooltip-top" data-tooltip="即将推出">浏览错题</button>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        鸭梨设计
      </div>
    </div>
  </div>
</template>

<script>
import meta_data from '@/assets/meta_info.json'
import { mapState } from 'vuex'

export default {
  name: 'Home',
  data() {
    return {
      lines: [],
      meta_data: meta_data,
      course: 'sixiu',
      line: '',
      is_opened: false,
    }
  },
  mounted() {
    this.lines = this.meta_data['sixiu']['pages']
    this.line = this.lines[0]
  },
  computed: mapState([
    'is_dark',
    'questions',
    'user_answer'
  ]),
  methods: {
    /**
     * 选择课程
     * @param {Event} e
     */
    select_course(e) {
      console.log('value:', e.target.value)
      this.lines = meta_data[e.target.value]['pages']
      this.line = this.lines[0]
      this.course = e.target.value
    },
    /**
     * 设置黑夜模式
     * @param {Event} e
     */
    change_dark(e) {
      // console.log('checked:', e.target.checked)
      this.$store.commit('set_dark_mode', e.target.checked)
    },
    /**
     * 进入背题页面
     */
    recite_page() {
      this.$router.push({
        path: '/recite',
        query: {
          line: this.line,
          mode: 'recite'
        }
      })
    },
    /**
     * 进入答题页面
     */
    practice_page() {
      this.$router.push({
        path: '/recite',
        query: {
          line: this.line,
          mode: 'practice'
        }
      })
    },
    /**
     * 进入考试页面
     */
    exam_page() {
      const seed = Math.floor(Math.random() * 10000)
      this.$router.push({
        path: '/recite',
        query: {
          course: this.course,
          seed: seed,
          mode: 'exam'
        }
      })
    },
    search_page() {
      this.$router.push({
        path: '/search'
      })
    }
  }
}
</script>

<style scoped>
button {
  margin: 4px;
}
</style>